<template>
    <div class="cinema">
      <transition name="fade">
        <div class="boxShadow" v-show="shadowStatus" @click="shadowStatus=false"></div>
      </transition>
      <div class="top">
        <div class="left">
          <button class="btn-search">杭州</button>
        </div>
        <div class="right">
          <input type="text" class="ipt-search-msg" placeholder="搜索影片、影院">
        </div>
      </div>
      <div class="bottom">
        <div class="title">
          <div class="search-item" @click.stop.prevent="_getSearchList(0)">{{checkedArea}}<span class="arrow-bottom"></span></div>
          <div class="search-item" @click.stop.prevent="_getSearchList(1)">{{checkedActivity}}<span class="arrow-bottom"></span></div>
          <div class="search-item" @click.stop.prevent="_getSearchList(2)">{{checkedDistance}}<span class="arrow-bottom"></span></div>
        </div>
        <transition name="fade">
          <div class="indexes-list" v-show="shadowStatus">
            <div class="indexes-item" v-show="showAreaStatus" v-for="item in area">
              <div class="indexes-item-container" :class="{active:item===checkedArea}" @click="checkedArea=item">
                {{item}}
              </div>
            </div>
            <div class="indexes-item" v-show="showActivityStatus"v-for="item in activity">
              <div class="indexes-item-container" :class="{active:item===checkedActivity}" @click="checkedActivity=item">
                {{item}}
              </div>
            </div>
            <div class="indexes-item" v-show="showDistanceStatus" v-for="item in distance">
              <div class="indexes-item-container" :class="{active:item===checkedDistance}" @click="checkedDistance=item">
                {{item}}
              </div>
            </div>
          </div>
        </transition>
        <div class="content">
          <div class="row">
            <div class="collect-wrapper">
              <collect></collect>
            </div>
            <div class="name">
              <div class="left">宁波养猪场</div>
              <div class="right">
                <span class="count">25元</span>&nbsp;起
              </div>
            </div>
            <div class="address">
              <div class="left">芜湖中山桥养猪场</div>
              <div class="right">0.1km</div>
            </div>
            <div class="activity">
              <span class="act-item">优惠</span><span class="act-item">优惠</span><span class="act-item">优惠</span>
            </div>
            <div class="text">
              <span class="text-icon">促</span> 猪肉买八斤送八斤
            </div>
          </div>
          <div class="row">
            <div class="collect-wrapper">
              <collect></collect>
            </div>
            <div class="name">
              <div class="left">宁波养猪场</div>
              <div class="right">
                <span class="count">25元</span>&nbsp;起
              </div>
            </div>
            <div class="address">
              <div class="left">芜湖中山桥养猪场</div>
              <div class="right">0.1km</div>
            </div>
            <div class="activity">
              <span class="act-item">优惠</span><span class="act-item">优惠</span><span class="act-item">优惠</span>
            </div>
            <div class="text">
              <span class="text-icon">促</span> 猪肉买八斤送八斤
            </div>
          </div>
          <div class="row">
            <div class="collect-wrapper">
              <collect></collect>
            </div>
            <div class="name">
              <div class="left">宁波养猪场</div>
              <div class="right">
                <span class="count">25元</span>&nbsp;起
              </div>
            </div>
            <div class="address">
              <div class="left">芜湖中山桥养猪场</div>
              <div class="right">0.1km</div>
            </div>
            <div class="activity">
              <span class="act-item">优惠</span><span class="act-item">优惠</span><span class="act-item">优惠</span>
            </div>
            <div class="text">
              <span class="text-icon">促</span> 猪肉买八斤送八斤
            </div>
          </div>
          <div class="row">
            <div class="collect-wrapper">
              <collect></collect>
            </div>
            <div class="name">
              <div class="left">宁波养猪场</div>
              <div class="right">
                <span class="count">25元</span>&nbsp;起
              </div>
            </div>
            <div class="address">
              <div class="left">芜湖中山桥养猪场</div>
              <div class="right">0.1km</div>
            </div>
            <div class="activity">
              <span class="act-item">优惠</span><span class="act-item">优惠</span><span class="act-item">优惠</span>
            </div>
            <div class="text">
              <span class="text-icon">促</span> 猪肉买八斤送八斤
            </div>
          </div>
          <div class="row">
            <div class="collect-wrapper">
              <collect></collect>
            </div>
            <div class="name">
              <div class="left">宁波养猪场</div>
              <div class="right">
                <span class="count">25元</span>&nbsp;起
              </div>
            </div>
            <div class="address">
              <div class="left">芜湖中山桥养猪场</div>
              <div class="right">0.1km</div>
            </div>
            <div class="activity">
              <span class="act-item">优惠</span><span class="act-item">优惠</span><span class="act-item">优惠</span>
            </div>
            <div class="text">
              <span class="text-icon">促</span> 猪肉买八斤送八斤
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import collect from '../../../components/collect/collect'
    export default {
        name: "cinema",
        created(){
          this.checkedArea = this.area[0]
          this.checkedActivity = this.activity[0]
          this.checkedDistance = this.distance[0]
        },
        data(){
          return{
            shadowStatus:false,
            showAreaStatus:false,
            showActivityStatus:false,
            showDistanceStatus:false,
            indexes:[],
            area:['城市区域','奥格瑞玛','暴风城','雷霆崖','幽暗城','银月城'],
            activity:['活动类型','优惠','充值','买就送','买一送一'],
            distance:['离我最近','价格最低'],
            checkedArea:'',
            checkedActivity:'',
            checkedDistance:''
          }
        },
        methods:{
          _getSearchList(status){
            switch (status) {
              case 0:
                this.showAreaStatus = true
                this.showActivityStatus = false
                this.showDistanceStatus = false
                break
              case 1:
                this.showAreaStatus = false
                this.showActivityStatus = true
                this.showDistanceStatus = false
                break
              case 2:
                this.showAreaStatus = false
                this.showActivityStatus = false
                this.showDistanceStatus = true
                break
            }
            this.shadowStatus = true
          }
        },
        components:{
          'collect':collect
        }
    }
</script>

<style scoped lang="stylus">
  .cinema
    height 100%
    position relative
    .boxShadow
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index 10
      background rgba(0,0,0,0.7)
      opacity 1
      &.fade-enter-active
        transition: opacity .4s;
      &.fade-enter
        opacity: 0;
      &.fade-leave-active
        transition opacity .4s
      &.fade-leave-to
        opacity 0
    .top
      height 26px
      display flex
      padding 9px 10px
      .left
        flex 0 0 60px
        .btn-search
         height 26px
         border none
         padding-right 10px
         background url("arrow_bottom.svg") no-repeat calc(100%) center / 8px 4px
         line-height 26px
         outline none
         color #ffffff
      .right
        flex 1
        .ipt-search-msg
          font-size 14px
          height 100%
          outline none
          width calc(100% - 26px)
          padding-left 26px
          border-radius 13px
          background #171718 url("btn-search.svg") no-repeat 5px center /16px 16px
          color #ffffff
    .bottom
      height calc(100% - 46px)
      .title
        position relative
        z-index 100
        height 32px
        display flex
        .search-item
          background #171718
          line-height 32px
          flex 1
          color #8B929E
          font-size 13px
          text-align center
          &:active
            background #3c3c3f
          .arrow-bottom
            display inline-block
            background url("arrow_bottom_yellow.svg") no-repeat center  6px/8px 5px
            height 13px
            width 18px

      .indexes-list
        position absolute
        width 100%
        top 76px
        left 0
        z-index 100
        text-align left
        background #171718
        font-size 0
        padding 18px 0 16px 0
        &.fade-enter-active
          transition: opacity .4s;
        &.fade-enter
          opacity: 0;
        &.fade-leave-active
          transition opacity .4s
        &.fade-leave-to
          opacity 0
        .indexes-item
          display inline-block
          width 25%
          color #666666
          height 32px
          line-height 32px
          text-align center
          padding 4px 0
          .indexes-item-container
            width 70px
            border 1px solid #666666
            margin 0 auto
            font-size 12px
            border-radius 2px
            &.active
              border 1px solid #F7C20F
              color #F7C20F
            &:active
              border 1px solid #F7C20F
              color #F7C20F


      .content
        overflow auto
        height calc(100% - 28px)
        .row
          position relative
          user-select none
          padding 10px 18px
          background #171718
          margin-bottom 10px
          &:active
            background #242425
          .collect-wrapper
            position absolute
            right 4px
            top 8px
            width 10px
            height 10px
          .name
            display flex
            height 22px
            line-height 22px
            /*margin-top 10px*/
            .left
              flex 1
              text-align left
              font-size 16px
              color #F2F2F2
            .right
              flex 0 0 66px
              text-align right
              color #f2f2f2
              font-size 12px
              .count
                color #F7C20F
                font-size 14px

          .address
            height 17px
            line-height 17px
            font-size 12px
            color #ACB1BB
            display flex
            margin-top 6px
            .left
              flex 1
              text-align left
            .right
              flex 0 0 66px
              text-align right
          .activity
            text-align left
            height 24px
            line-height 24px
            margin-top 2px
            .act-item
              line-height 13px
              display inline-block
              height 13px
              color #F7C20F
              border 1px solid #F7C20F
              font-size 10px
              border-radius 7px
              padding 1px 2px
              margin-right 3px
          .text
            margin-top 7px
            text-align left
            font-size 12px
            color #ACB1BB
            height 17px
            /*line-height 17px*/
            .text-icon
              display inline-block
              background #EEAC21
              color #222426
              width 14px
              height 14px
              font-size 10px
              text-align center
              line-height 15px
              border-radius 2px
              vertical-align bottom
</style>
